<template>
  <view class="data-summary-page page-content">
    <!-- 刷新下拉 -->
    <z-paging ref="paging" v-model="refreshData" @query="handleRefresh" :auto="true" :refresher-enabled="true" :paging-enabled="false">
      <template #top>
        <up-navbar title="数据汇总2" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
      </template>
      
      <!-- 违停数据模块 -->
      <IllegalParkingStats ref="illegalParkingRef" @refresh="handleIllegalParkingRefresh" @detail="handleDetailClick" />

      <!-- 泊位异常模块 -->
      <BerthAbnormalStats ref="berthAbnormalRef" @refresh="handleBerthAbnormalRefresh" @detail="handleAbnormalDetailClick" />

    </z-paging>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import IllegalParkingStats from './components/IllegalParkingStats.vue'
import BerthAbnormalStats from './components/BerthAbnormalStats.vue'

const paging = ref(null)
const refreshData = ref([])
const illegalParkingRef = ref(null)
const berthAbnormalRef = ref(null)
let autoRefreshTimer = null

// 处理违停数据组件刷新
const handleIllegalParkingRefresh = () => {
  console.log('违停数据已刷新')
}

// 处理泊位异常组件刷新
const handleBerthAbnormalRefresh = () => {
  console.log('泊位异常数据已刷新')
}

// 处理详情页面跳转
const handleDetailClick = (type, data) => {
  console.log('跳转详情页面:', type, data)
  switch (type) {
    case 'today':
      uni.navigateTo({ url: '/pages/data-summary-2/detail/today-illegal' })
      break
    case 'pending':
      uni.navigateTo({ url: '/pages/data-summary-2/detail/pending-illegal' })
      break
  }
}

// 处理泊位异常详情跳转
const handleAbnormalDetailClick = (type, data) => {
  console.log('跳转泊位异常详情:', type, data)
  switch (type) {
    case 'today':
      uni.navigateTo({ url: '/pages/data-summary-2/detail/today-abnormal' })
      break
    case 'pending':
      uni.navigateTo({ url: '/pages/data-summary-2/detail/pending-abnormal' })
      break
  }
}

// 处理主页面刷新
const handleRefresh = async () => {
  try {
    // 刷新子组件数据
    if (illegalParkingRef.value) {
      await illegalParkingRef.value.refreshData()
    }
    if (berthAbnormalRef.value) {
      await berthAbnormalRef.value.refreshData()
    }
    paging.value?.complete()
  } catch (error) {
    console.error('刷新失败:', error)
    paging.value?.complete()
  }
}

// 自动刷新
const startAutoRefresh = () => {
  autoRefreshTimer = setInterval(() => {
    // 自动刷新数据
    if (illegalParkingRef.value) {
      illegalParkingRef.value.refreshData()
    }
    if (berthAbnormalRef.value) {
      berthAbnormalRef.value.refreshData()
    }
  }, 60000) // 60秒刷新一次
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (autoRefreshTimer) {
    clearInterval(autoRefreshTimer)
    autoRefreshTimer = null
  }
}

onMounted(() => {
  // 启动自动刷新
  startAutoRefresh()
})

onUnmounted(() => {
  // 清理定时器
  stopAutoRefresh()
})

// 暴露刷新方法给父组件
defineExpose({
  refreshData: handleRefresh
})
</script>

<style lang="scss" scoped>
.data-summary-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}
</style>